<template>
  <div>
    <el-skeleton class="mt-10 _module_explicit-padding-lf-20" :rows="6" animated v-if="loading"/>
    <div v-if="!loading && typography==2">
      <div v-if="dictumInfoListArr!=null && dictumInfoListArr.length>0" class="dictum-info-ul">
        <div v-for="(item,index) in dictumInfoListArr" :key="index" :ref="`dictumListItem${index}`"
             class="dictum-info-cl qx-dictum-list-slide-up">
          <div class="flex-space-between user-info align-items-center">
            <div class="flex-left align-items-center">
              <div class="ml-6">
                <nuxt-link class="" :to="`/user_home/article?uuid=`+$base64.encode(item.uid)" target="_blank">
                  <p class="font-s-14 cursor-pointer text-underline-hover hover-cl">{{ item.nickname }}</p>
                </nuxt-link>
              </div>
              <div class="ml-4 mr-4 color-grey-3 font-s-13">|</div>
              <div class="color-grey-2 font-s-13" title="记录时间">
                <span class="" v-text="$utils.reckonTime(item.updateTime)"
                      :title="$utils.parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}')"></span>
              </div>
            </div>
            <div class="ml-8">
              <el-tag class="cursor-pointer mr-10" size="small" type="info" effect="plain" title="收录专辑"
                      v-if="item.albumName!=null">
                <nuxt-link :to="`/external_info/album-info?data=`+item.albumId" target="_blank" rel="noopener">
                  {{ item.albumName }}
                </nuxt-link>
              </el-tag>
              <span v-if="item.labelList!=null"
                    v-for="(items,indexs) in item.labelList" title="标签" :key="indexs" class="font-s-13 color-grey">
              #{{ items }}
                <span v-if="indexs+1!=item.labelList.length" class="color-grey-3 ml-2 mr-2">|</span>
              </span>
            </div>
            <div class="cursor-pointer ml-10" title="更多操作" v-if="isSelf">
              <el-dropdown size="medium" trigger="click">
                <div class="el-dropdown-link">
                  <svg t="1729494770005" class="icon icon-theme-1" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="7153" width="20" height="20">
                    <path
                      d="M805.236364 488.727273h-141.963637a127.767273 127.767273 0 0 1-128-126.836364V221.090909A127.767273 127.767273 0 0 1 663.272727 93.090909h141.963637a128 128 0 0 1 127.767272 128v140.8A128 128 0 0 1 805.236364 488.727273zM663.272727 162.909091A57.949091 57.949091 0 0 0 605.090909 221.090909v140.8A58.181818 58.181818 0 0 0 663.272727 418.909091h141.963637a58.181818 58.181818 0 0 0 57.949091-57.949091V221.090909A57.949091 57.949091 0 0 0 805.236364 162.909091zM805.236364 930.909091h-141.963637a127.767273 127.767273 0 0 1-128-127.069091v-140.8A127.767273 127.767273 0 0 1 663.272727 535.272727h141.963637a128 128 0 0 1 127.767272 127.767273v140.8A128 128 0 0 1 805.236364 930.909091z m-141.963637-325.818182a58.181818 58.181818 0 0 0-58.181818 57.949091v140.8A57.949091 57.949091 0 0 0 663.272727 861.090909h141.963637a57.949091 57.949091 0 0 0 57.949091-57.716364v-140.334545A58.181818 58.181818 0 0 0 805.236364 605.090909zM364.683636 488.727273h-141.963636a127.767273 127.767273 0 0 1-127.534545-127.767273V221.090909A127.767273 127.767273 0 0 1 222.72 93.090909h141.963636a127.767273 127.767273 0 0 1 127.767273 128v140.8A127.767273 127.767273 0 0 1 364.683636 488.727273zM222.72 162.909091a57.716364 57.716364 0 0 0-57.716364 58.181818v140.8A57.949091 57.949091 0 0 0 222.72 418.909091h141.963636a58.181818 58.181818 0 0 0 57.949091-57.949091V221.090909A57.949091 57.949091 0 0 0 364.683636 162.909091zM364.683636 930.909091h-141.963636a127.767273 127.767273 0 0 1-127.534545-127.534546v-140.334545A127.767273 127.767273 0 0 1 222.72 535.272727h141.963636a127.767273 127.767273 0 0 1 127.767273 127.767273v140.8A127.767273 127.767273 0 0 1 364.683636 930.909091z m-141.963636-325.818182a57.949091 57.949091 0 0 0-57.716364 57.949091v140.8A57.716364 57.716364 0 0 0 222.72 861.090909h141.963636a57.949091 57.949091 0 0 0 57.949091-57.716364v-140.334545A58.181818 58.181818 0 0 0 364.683636 605.090909z"
                      p-id="7154"></path>
                  </svg>
                </div>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="updateInfo(item)">编辑名言</el-dropdown-item>
                  <el-dropdown-item @click.native="copyInfo(item)">复制名言</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteInfo(item)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="dictum-content">
            <div class="dictum-text-content" v-text="item.content"></div>
            <div class="flex-right mt-20" style="width: 100%">
              <div v-if="(item.worksName!=null && item.worksName!='')||(item.author!=null && item.author!='')"
                   class="color-grey-2 font-s-13">——
                <span v-if="item.author!=null" class="cursor-pointer text-underline-hover" title="作者"
                      @click="jumpUrlBaidu('www.baidu.com',item.author)">
                {{ item.author }}
                </span>
                <span v-if="item.worksName!=null && item.worksName!=''" title="名言出处">
                《<span class="cursor-pointer text-underline-hover color-fb7299"
                       @click="jumpUrlBaidu('www.baidu.com',item.worksName)">{{ item.worksName }}</span>》
                </span>
              </div>
            </div>
          </div>
          <div class="flex-left font-s-13 color-grey-2 mt-20">
            <!--            <div title="点赞" class="cursor-pointer mr-20" @click="$modal.notify('功能待开发！')">-->
            <!--              <svg t="1685704715311" class="icon icon-theme-1 icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024"-->
            <!--                   version="1.1"-->
            <!--                   xmlns="http://www.w3.org/2000/svg" p-id="2426">-->
            <!--                <path-->
            <!--                  d="M194.792475 478.69343c16.167215 0 29.330002-13.163811 29.330002-29.346375 0-16.092513-13.015432-29.212322-29.801746-29.212322-0.086981 0-0.177032 0-0.264013 0l-60.606333 0.177032c-1.560542-0.206708-3.149736-0.325411-4.76963-0.325411-21.291932 0-38.636972 17.537422-38.636972 39.09439l-0.323365 423.853427c0 21.645996 16.9613 38.578644 38.636972 38.578644l1.677199 0.057305c0.707105 0.029676 1.385557 0.059352 2.032286 0.059352 0.823761 0 1.64957-0.029676 1.826602-0.11768l59.926858 0.086981c0.559748 0 1.001817-0.11768 1.089821-0.11768 0 0-0.029676 0-0.116657 0.057305l3.76986-0.147356 0-0.382717c13.517875-2.236947 23.64656-13.84124 23.64656-27.799136 0-13.987572-10.129708-25.589818-23.64656-27.828812l0-0.766456-49.827849 0 1.413186-385.92356L194.792475 478.69036z"-->
            <!--                  p-id="2427"></path>-->
            <!--                <path-->
            <!--                  d="M918.228001 436.301947c-18.199501-29.66974-45.204551-44.821835-82.22163-46.322002-1.883907-0.25071-3.799536-0.412392-5.77247-0.412392l-195.744149-0.648776c13.398148-40.359196 20.732184-83.750449 20.732184-122.740462 0-27.255761-3.00545-54.686507-8.894577-81.543178l-1.206478-3.196809-0.089028 0.01535c-12.161994-46.837748-53.477982-79.259158-101.626585-79.259158-55.393611 0-97.18032 46.248324-97.18032 107.576087l-0.059352 3.047406c-0.057305 2.222621-0.116657 4.40124 0.059352 6.16849-2.796696 101.715613-83.869153 187.397041-188.559517 199.324698l-3.358491 0.36839-0.76441 274.43128 0 228.491994 13.930267 0.005117 0.587378 0.11154 3.179412-0.027629 0.01535-0.081864 485.653959 0.198521 8.685823-0.236384c19.84907 0 31.038924-5.03569 48.621371-16.344247 16.22452-10.482749 29.359678-25.266453 37.751812-42.316781 2.562359-3.76986 4.418636-7.862062 5.565762-12.251022l75.30101-336.657506c1.089821-4.225231 1.472538-8.643867 1.149173-12.56006C935.660023 478.42737 930.212964 455.900308 918.228001 436.301947zM879.148961 488.807788l-0.912789 3.799536 0.295735 0.074701-80.129992 355.2387-0.148379 0.353041c-2.296299 5.536087-6.15314 10.160407-11.101849 13.340843-3.415796 2.209318-7.185656 3.622504-11.161201 4.239558-0.470721-0.057305-0.941442-0.057305-1.413186-0.057305l-3.03308 0.086981-462.84344-0.530073-0.177032-392.299781c79.540567-35.986609 148.155295-73.959455 183.080735-167.79868l0.295735 0.074701 1.119497-3.328815c3.709485-11.263531 6.596232-22.350031 8.598842-32.909527 5.447059-28.577872 5.212722-56.422034 5.183046-58.041928-1.766226-13.502525 1.206478-24.738427 8.80555-33.394574 8.598842-9.777691 21.673625-14.151301 30.744211-14.151301 22.586414 0.766456 45.526893 30.966269 45.61592 48.163953 0.029676 0.26606 5.38873 26.945699 5.418406 55.186903 0.057305 27.65178-2.651386 45.277206-3.858888 51.828412l-0.500397 0-0.589424 3.062755c-5.595438 29.522384-15.518438 57.794287-29.41903 84.003206l-0.972141 2.856048 0.118704 0.132006c-1.885953 4.696975-2.856048 9.643638-2.856048 14.709003 0 25.032116 27.121707 25.032116 41.697681 25.032116l233.381351 0.264013 7.15598 0.221034c1.266853 0.045025 2.503007 0.089028 3.592828 0.118704l0 0.425695 5.538133-0.248663c10.453073 0 19.937075 5.344728 25.412786 14.296611C880.709503 471.080032 881.829 480.283648 879.148961 488.807788z"-->
            <!--                  p-id="2428"></path>-->
            <!--              </svg>-->
            <!--              点赞-->
            <!--            </div>-->
            <div title="评论" class="cursor-pointer mr-20 hover-cl" @click="viewCommentList(item)">
              <svg t="1685704893908" class="icon icon-theme-1 icon-size-16 svg-translateY-3 icon-hover"
                   viewBox="0 0 1024 1024"
                   version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3482">
                <path d="M405.97 530.4m-40.81 0a40.81 40.81 0 1 0 81.62 0 40.81 40.81 0 1 0-81.62 0Z" p-id="3483"
                ></path>
                <path d="M618.04 530.4m-40.81 0a40.81 40.81 0 1 0 81.62 0 40.81 40.81 0 1 0-81.62 0Z" p-id="3484"
                ></path>
                <path
                  d="M512.01 959.33c-70.48 0-140.41-16.79-202.89-48.62H93.23V669.25c-18.96-50.4-28.56-103.26-28.56-157.26 0-246.66 200.68-447.32 447.34-447.32s447.32 200.66 447.32 447.32-200.66 447.34-447.32 447.34zM166.85 837.09h160.56l8.16 4.39c53.89 28.94 114.89 44.23 176.43 44.23 206.06 0 373.7-167.65 373.7-373.72 0-206.06-167.65-373.7-373.7-373.7-206.07 0-373.72 167.65-373.72 373.7 0 47.09 8.75 93.16 25.99 136.91l2.57 6.51v181.68z"
                  p-id="3485"></path>
              </svg>
              {{ item.commentSum == null ? '--' : item.commentSum }}
            </div>
            <!--            <div title="收藏" class="cursor-pointer icon-theme-1 mr-20" @click="$modal.notify('功能待开发！')">-->
            <!--              <svg t="1685705013960" class="icon icon-size-16 svg-translateY-3" viewBox="0 0 1024 1024" version="1.1"-->
            <!--                   xmlns="http://www.w3.org/2000/svg" p-id="4508">-->
            <!--                <path-->
            <!--                  d="M949.888 457.258667c26.069333-29.824 13.866667-67.52-24.789333-76.309334L681.728 325.546667l-127.786667-214.677334c-20.266667-34.069333-59.925333-34.090667-80.213333 0l-127.786667 214.677334-243.370666 55.381333c-38.442667 8.746667-50.858667 46.506667-24.789334 76.309333l164.394667 188.053334-22.613333 248.917333c-3.584 39.466667 28.458667 62.805333 64.896 47.146667l237.781333-102.037334a21.333333 21.333333 0 0 0-16.810667-39.210666L267.626667 902.186667c-6.698667 2.88-6.229333 3.221333-5.568-4.096l24.277333-267.093334-176.426667-201.813333c-4.757333-5.461333-4.906667-5.034667 2.133334-6.634667l261.205333-59.434666 137.152-230.4c3.733333-6.293333 3.136-6.293333 6.869333 0l137.173334 230.4 261.205333 59.434666c7.125333 1.621333 6.954667 1.088 2.133333 6.613334l-176.426666 201.813333 24.256 267.093333a21.333333 21.333333 0 1 0 42.496-3.84l-22.613334-248.917333 164.394667-188.053333z"-->
            <!--                  p-id="4509"></path>-->
            <!--              </svg>-->
            <!--              收藏-->
            <!--            </div>-->
            <div class="svg-translateY-4 text-underline hover-cl cursor-pointer _module_hiding"
                 @click="viewCommentList(item)">
              查看
            </div>

            <div class="svg-translateY-4 text-underline hover-cl cursor-pointer _module_explicit">
              <nuxt-link :to="`/dictum/dictum-details/`+$base64.encode(item.id)" target="_blank">
                查看
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="text-center mt-20">
        <svg t="1682476949715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1648" width="80" height="80">
          <path
            d="M491.12588 196.681c0 13.868-11.26 25.095-25.107 25.095H365.56188a25.11 25.11 0 0 1-17.762-7.344 25.135 25.135 0 0 1-7.361-17.751c0-13.864 11.249-25.113 25.124-25.113h100.457c13.846-0.001 25.106 11.249 25.106 25.113z m136.727 0c0 13.868-7.915 25.095-17.682 25.095h-70.667c-9.778 0-17.682-11.237-17.682-25.095 0-13.864 7.903-25.113 17.682-25.113h70.667c9.767-0.001 17.682 11.249 17.682 25.113zM781.32088 298.526a29.297 29.297 0 0 1-29.313 29.303H461.81388c-16.178 0-29.295-13.117-29.295-29.302 0-16.177 13.118-29.295 29.295-29.295h290.195a29.303 29.303 0 0 1 20.727 8.575 29.306 29.306 0 0 1 8.585 20.719z m78.135 104.634c0 15.416-12.494 27.916-27.915 27.916H393.45588c-15.416 0-27.91-12.494-27.91-27.91 0-15.41 12.495-27.909 27.91-27.909H831.53088c15.415 0 27.915 12.489 27.925 27.903z m25.113 99.073a29.313 29.313 0 0 1-8.58 20.725 29.287 29.287 0 0 1-20.721 8.586h-80.938c-16.189 0-29.307-13.123-29.307-29.306 0-16.185 13.117-29.308 29.307-29.308h80.938c7.77 0 15.223 3.088 20.721 8.58a29.328 29.328 0 0 1 8.58 20.723z m-161.85 0c0 16.192-19.491 29.311-43.589 29.311H118.90088c-24.055 0-43.558-13.106-43.558-29.311 0-16.186 19.502-29.303 43.558-29.303h560.229c24.098 0.001 43.589 13.118 43.589 29.303z m0 0"
            fill="#E3EDF1" p-id="1649"></path>
          <path
            d="M245.56088 562.214a30.712 30.712 0 0 1-8.994 21.719 30.661 30.661 0 0 1-21.714 8.988h-41.856c-16.955 0-30.697-13.74-30.697-30.697 0-16.951 13.742-30.691 30.697-30.691h41.856a30.695 30.695 0 0 1 30.708 30.681z m0 0"
            fill="#E3EDF1" p-id="1650"></path>
          <path
            d="M546.92488 622.212a33.522 33.522 0 0 1-9.805 23.689 33.495 33.495 0 0 1-23.685 9.811H33.48888A33.492 33.492 0 0 1 4.48988 638.97a33.46 33.46 0 0 1 0-33.488 33.483 33.483 0 0 1 28.999-16.748h479.946a33.482 33.482 0 0 1 23.679 9.805 33.457 33.457 0 0 1 9.811 23.673z m429.73 118.303c-0.006 18.326-14.857 33.18-33.184 33.186H543.83688c-17.993-0.469-32.329-15.191-32.329-33.186 0-17.996 14.336-32.715 32.329-33.186H943.46088c18.326 0.01 33.183 14.861 33.194 33.186z m0 0"
            fill="#E3EDF1" p-id="1651"></path>
          <path
            d="M641.80188 797.718a24.01 24.01 0 0 1-24.028 24.015H584.88088c-13.263 0-24.018-10.748-24.018-24.016 0-13.264 10.755-24.018 24.018-24.018h32.893c13.262 0.005 24.017 10.755 24.028 24.019z m0 0"
            fill="#E3EDF1" p-id="1652"></path>
          <path
            d="M909.70288 845.665a23.93 23.93 0 0 1-7.018 16.932 23.967 23.967 0 0 1-16.935 6.996H439.68688c-13.214 0-23.926-10.713-23.926-23.928s10.712-23.932 23.926-23.932H885.75088c13.229 0 23.952 10.711 23.952 23.932z m92.054 0c0 13.209-10.707 23.922-23.921 23.928H958.73088c-13.22 0-23.932-10.713-23.932-23.928s10.712-23.932 23.932-23.932h19.104c13.199 0 23.922 10.711 23.922 23.932z m0 0"
            fill="#E3EDF1" p-id="1653"></path>
          <path
            d="M708.23688 210.098H289.12288s-32.227-4.026-34.262 38.291c-2.02 42.305 0 486.035 0 543.744-0.677 47.117 57.732 57.383 78.587 30.553 28.216-34.246 10.078-74.561 4.043-76.584-6.062-2.031 392.934 0 392.934 0V264.5c-0.001 0 5.562-54.515-22.188-54.402z m0 0"
            fill="#FFFFFF" p-id="1654"></path>
          <path
            d="M300.61188 842.454c-14.448 0-28.14-5.471-37.553-15.045-8.966-9.096-13.605-21.328-13.402-35.357 0-12.902-0.102-45.41-0.236-88.504-0.461-147.648-1.332-422.482 0.236-455.407 1.53-31.97 20.248-43.353 37.249-43.353 1.803 0 2.871 0.146 2.871 0.146l418.46-0.033c6.804 0 12.468 2.507 16.951 7.464 14.031 15.528 10.563 51.164 10.417 52.673l0.032 486.307-5.235-0.02c-0.011 0-177.319-0.902-293.733-0.902-52.776 0-77.653 0.193-89.111 0.396 2.002 4.119 3.275 8.275 3.667 9.66 3.12 10.898 8.017 39.084-13.756 65.514-8.097 10.426-21.565 16.461-36.857 16.461z m-13.706-627.255c-7.588 0-25.393 3.27-26.843 33.436-1.557 32.655-0.697 307.319-0.236 454.874 0.135 43.107 0.236 75.641 0.236 88.623-0.16 11.26 3.431 20.898 10.401 27.959 7.49 7.592 18.471 11.945 30.148 11.945 12.05 0 22.52-4.568 28.711-12.553 13.832-16.779 15.169-34.219 13.875-45.908-1.407-12.756-6.304-21.51-8.005-22.836-1.836-0.52-3.334-2.975-2.916-5.508 0.328-2.047 0.526-3.287 6.846-4.039v-0.016l0.021 0.016c9.853-1.176 34.525-1.176 97.503-1.176 104.612 0 258.397 0.725 288.541 0.871V264.5c0.945-9.535 1.316-35.131-7.748-45.167a11.582 11.582 0 0 0-9.144-4.032H289.12288c-0.73-0.043-1.316-0.102-2.217-0.102z m0 0"
            fill="#21a2db" p-id="1655"></path>
          <path
            d="M309.11288 301.808h368.68v101.289h-368.68V301.808z m0 136.023h348.963v21.826H309.11288v-21.826z m0 53.941h184.332v21.82H309.11288v-21.82z m0 63.01H612.50088v21.826H309.11288v-21.826z m0 62.645h223.292v21.822H309.11288v-21.822z m543.465 83.677c9.053 9.043 11.608 21.393 5.719 27.578-5.863 6.18-18.004 3.85-27.035-5.213l-86.877-86.922c-9.031-9.043-11.598-21.398-5.687-27.576 5.858-6.186 17.998-3.852 27.014 5.213l86.866 86.92z m0 0"
            fill="#D0EAF1" p-id="1656"></path>
          <path
            d="M849.45888 734.749c-6.658 0-14.154-3.523-20.044-9.434l-86.867-86.922c-10.201-10.201-12.709-23.918-5.729-31.217 6.642-7.021 20.988-4.58 30.739 5.184l86.856 86.918c10.201 10.182 12.747 23.895 5.761 31.201-2.641 2.793-6.346 4.27-10.716 4.27zM747.51488 608.122c-2.014 0-4.864 0.451-6.921 2.637-4.864 5.068-2.266 16.039 5.638 23.953l86.866 86.92c4.94 4.941 11.056 7.893 16.361 7.893 2.024 0 4.875-0.449 6.948-2.637 4.854-5.078 2.238-16.043-5.665-23.938l-86.861-86.93c-4.935-4.945-11.05-7.898-16.366-7.898z m0 0"
            fill="#21a2db" p-id="1657"></path>
          <path
            d="M736.97488 611.364c-6.652 1.988 2.48-3.869-0.811 4.291-1.203 7.02 1.67 12.877 6.975 18.258l82.49 83.922c8.495 8.674 25.473 17.467 29.64 12.254 0.43-0.553 0.913-1.037 1.326-1.568l-119.62-117.157z m0 0"
            fill="#21a2db" p-id="1658"></path>
          <path
            d="M751.42388 458.224c-47.632-47.643-125.172-47.643-172.836 0.023-47.691 47.641-47.702 125.219-0.032 172.883 47.675 47.633 125.226 47.633 172.868 0 47.642-47.664 47.642-125.264 0-172.906"
            fill="#FFFFFF" p-id="1659"></path>
          <path
            d="M664.99788 672.062a126.68 126.68 0 0 1-90.126-37.258 126.54 126.54 0 0 1-37.274-90.131c0-34.086 13.257-66.098 37.296-90.117a126.572 126.572 0 0 1 90.12-37.274 126.6 126.6 0 0 1 90.083 37.249c49.688 49.693 49.688 130.568 0 180.273a126.577 126.577 0 0 1-90.099 37.258z m0.026-244.363c-31.293 0-60.685 12.164-82.753 34.23a116.226 116.226 0 0 0-34.257 82.754c0 31.305 12.15 60.697 34.219 82.764 22.074 22.063 51.461 34.197 82.765 34.197s60.685-12.135 82.742-34.197c45.641-45.65 45.641-119.898 0-165.527a116.105 116.105 0 0 0-82.716-34.221z m0 0"
            fill="#21a2db" p-id="1660"></path>
          <path
            d="M732.10988 516.892h-14.965v-5.214h14.965v5.214z m-30.594 0H685.89088v-5.214h15.625v5.214z m-31.245 0h-15.63v-5.214h15.63v5.214z m-31.261 0H623.39088v-5.214h15.619v5.214z m-31.234 0h-15.631v-5.214h15.631v5.214z m85.734-42.629h-15.625v-5.215h15.625v5.215z m-31.245 0h-15.619v-5.215h15.619v5.215z m-31.25 0h-15.63v-5.215h15.63v5.215z m115.545 98.347h-14.605v-5.215h14.605v5.215z m-30.225 0H700.72088v-5.215h15.614v5.215z m-31.245 0h-15.63v-5.215h15.63v5.215z m-31.25 0h-15.63v-5.215h15.63v5.215z m-31.261 0h-15.614v-5.215h15.614v5.215z m-31.233 0h-15.631v-5.215h15.631v5.215z m108.505 52.28h-15.63v-5.213h15.63v5.213z m-31.261 0h-15.614v-5.213h15.614v5.213z m-31.234 0h-15.631v-5.213h15.631v5.213z m0 0M331.66988 742.519s38.337 72.16-33.065 94.742c0 0-3.828-0.412 0 0 79.994-0.717 460.272 1.988 460.272 1.988s30.224-18.832 38.547-39.303c8.285-20.447-6.046-49.33-18.144-57.732-26.417-2.578-447.61 0.305-447.61 0.305z m0 0"
            fill="#CEE7EE" p-id="1661"></path>
          <path
            d="M759.61188 841.849h-0.757c-2.959-0.023-297.074-2.105-420.388-2.105-16.484 0-30.01 0.031-39.443 0.113l-0.145 0.053-4.236-0.461-0.328-2.518 0.134-2.471h2.47l0.279 0.037v-0.016l1.16 0.127c18.916-6.092 31.438-16.365 37.236-30.52 11.104-27.113-6.046-60.029-6.212-60.357l-2.019-3.791 4.291-0.035c2.019-0.014 202.814-1.369 334.316-1.369 67.987 0 106.207 0.359 113.574 1.078l0.671 0.07 0.563 0.379c13.424 9.322 27.669 39.66 19.067 60.854-8.549 21.012-38.312 39.74-39.584 40.539l-0.649 0.393z m-421.145-7.309c120.216 0 402.722 1.982 419.658 2.105 4.312-2.803 29.623-19.818 36.888-37.678 7.78-19.232-5.955-46.205-16.667-54.221-8.692-0.666-46.482-0.986-112.376-0.986-121.043 0-300.816 1.158-330.171 1.334 4.403 9.854 14.449 36.916 4.628 60.955-4.999 12.242-14.401 21.799-28.039 28.533 7.421-0.032 16.216-0.042 26.079-0.042z m0 0"
            fill="#21a2db" p-id="1662"></path>
          <path
            d="M1021.33888 359.582c0 20.925-17.252 37.894-38.477 37.894H814.41788c-21.241 0-38.478-16.969-38.478-37.894v-12.837c0-20.919 17.236-37.903 38.478-37.903h168.444c21.225 0 38.477 16.973 38.477 37.903v12.837z m0 0"
            fill="#FFFFFF" p-id="1663"></path>
          <path
            d="M982.86188 399.435H814.41788c-22.288 0-40.438-17.869-40.438-39.853v-12.837c0-21.978 18.139-39.847 40.438-39.847h168.444c22.282 0 40.437 17.87 40.437 39.847v12.837c-0.011 21.973-18.154 39.853-40.437 39.853z m-168.444-88.633c-20.136 0-36.522 16.125-36.522 35.943v12.837c0 19.819 16.387 35.944 36.522 35.944h168.444c20.135 0 36.517-16.125 36.517-35.944v-12.837c0-19.818-16.382-35.943-36.517-35.943H814.41788z m0 0"
            fill="#5BB6D2" p-id="1664"></path>
          <path
            d="M848.57788 437.154l14.739-41.628h54.456l-69.195 41.628z m17.499-37.719l-10.181 28.768 47.793-28.768h-37.612z m0 0"
            fill="#5BB6D2" p-id="1665"></path>
          <path
            d="M864.41188 407.284l5.687-16.699 15.706-3.232 15.979 3.491 5.316 2.667 3.624 0.415L883.06088 410.5l-18.649-3.216z m0 0"
            fill="#FFFFFF" p-id="1666"></path>
          <path
            d="M904.38788 340.441a11.74 11.74 0 1 0-5.986 21.848 11.745 11.745 0 0 0 17.719-10.465c-0.194-6.341-5.391-11.383-11.733-11.383zM833.59188 340.441c-6.347-0.005-11.544 5.031-11.742 11.372a11.735 11.735 0 0 0 5.756 10.476 11.739 11.739 0 0 0 11.952 0.005 11.736 11.736 0 0 0 5.767-10.47c-0.194-6.341-5.386-11.383-11.733-11.383zM975.18388 340.441c-6.347-0.005-11.55 5.031-11.748 11.372a11.747 11.747 0 1 0 23.481 0.011c-0.194-6.341-5.393-11.383-11.733-11.383z"
            fill="#21a2db" p-id="1667"></path>
        </svg>
        <p class="color-grey font-s-14">暂无数据</p>
      </div>
    </div>
    <!-- 瀑布流布局 -->
    <div v-if="!loading && typography==1">
      <div v-if="dictumInfoListArr!=null && dictumInfoListArr.length>0" class="ml-10">
        <waterfall-layout
          :items="dictumInfoListArr"
          :columns="2"
          :gap="40"
          :animation-delay="120"
          :enable-animation="true"
          ref="waterfallLayout">
          <template #default="{ item, index }">
            <div class="box-item">
              <!-- 动态渲染每个列中的元素 -->
              <div class="flex-space-between align-items-center mb-10" v-if="item.labelList!=null">
                <div style="line-height: 1px"></div>
                <div class="flex-right align-items-center">
                  <div v-for="(items,indexs) in item.labelList" title="标签" :key="indexs"
                       class="font-s-13 color-grey-2">
                    <span>#{{ items }}</span>
                    <span v-if="indexs+1!=item.labelList.length" class="ml-2 mr-2 color-grey-3">|</span>
                  </div>
                </div>
              </div>
              <hr class="hr-dictum mb-5" v-if="item.labelList!=null"/>
              <div class="dictum-content">
                <div class="dictum-text-content" v-text="item.content"></div>
                <div class="flex-right mt-15" style="width: 100%">
                  <div v-if="(item.worksName!=null && item.worksName!='')||(item.author!=null && item.author!='')"
                       class="color-grey-2 font-s-13">——
                    <span v-if="item.author!=null" class="cursor-pointer text-underline-hover"
                          title="作者"
                          @click="jumpUrlBaidu('www.baidu.com',item.author)">
                                {{ item.author }}
                                </span>
                    <span v-if="item.worksName!=null && item.worksName!=''" title="名言出处">
                                《<span class="cursor-pointer text-underline-hover color-fb7299"
                                       @click="jumpUrlBaidu('www.baidu.com',item.worksName)">{{ item.worksName }}</span>》
                                </span>
                  </div>
                </div>
              </div>
              <div class="flex-left font-s-13 color-grey-3 mt-10">
                <div title="评论" class="cursor-pointer mr-15 hover-cl">
                  <svg t="1685704893908" class="icon icon-theme-2 icon-size-16 svg-translateY-3 icon-hover"
                       viewBox="0 0 1024 1024"
                       version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="3482">
                    <path d="M405.97 530.4m-40.81 0a40.81 40.81 0 1 0 81.62 0 40.81 40.81 0 1 0-81.62 0Z" p-id="3483"
                    ></path>
                    <path d="M618.04 530.4m-40.81 0a40.81 40.81 0 1 0 81.62 0 40.81 40.81 0 1 0-81.62 0Z" p-id="3484"
                    ></path>
                    <path
                      d="M512.01 959.33c-70.48 0-140.41-16.79-202.89-48.62H93.23V669.25c-18.96-50.4-28.56-103.26-28.56-157.26 0-246.66 200.68-447.32 447.34-447.32s447.32 200.66 447.32 447.32-200.66 447.34-447.32 447.34zM166.85 837.09h160.56l8.16 4.39c53.89 28.94 114.89 44.23 176.43 44.23 206.06 0 373.7-167.65 373.7-373.72 0-206.06-167.65-373.7-373.7-373.7-206.07 0-373.72 167.65-373.72 373.7 0 47.09 8.75 93.16 25.99 136.91l2.57 6.51v181.68z"
                      p-id="3485"></path>
                  </svg>
                  {{ item.commentSum == null ? '--' : item.commentSum }}
                </div>
                <div class="font-s-13 mr-15 svg-translateY-4" title="记录时间">
                <span class="" v-text="$utils.reckonTime(item.updateTime,'{y}-{m}-{d}')"
                      :title="$utils.parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}')"></span>
                </div>
                <div class="svg-translateY-4 mr-15 text-underline-hover cursor-pointer" @click="viewCommentList(item)">
                  查看
                </div>
              </div>
            </div>
          </template>
        </waterfall-layout>
      </div>
      <div v-else class="text-center mt-20">
        <svg t="1682476949715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="1648" width="80" height="80">
          <path
            d="M491.12588 196.681c0 13.868-11.26 25.095-25.107 25.095H365.56188a25.11 25.11 0 0 1-17.762-7.344 25.135 25.135 0 0 1-7.361-17.751c0-13.864 11.249-25.113 25.124-25.113h100.457c13.846-0.001 25.106 11.249 25.106 25.113z m136.727 0c0 13.868-7.915 25.095-17.682 25.095h-70.667c-9.778 0-17.682-11.237-17.682-25.095 0-13.864 7.903-25.113 17.682-25.113h70.667c9.767-0.001 17.682 11.249 17.682 25.113zM781.32088 298.526a29.297 29.297 0 0 1-29.313 29.303H461.81388c-16.178 0-29.295-13.117-29.295-29.302 0-16.177 13.118-29.295 29.295-29.295h290.195a29.303 29.303 0 0 1 20.727 8.575 29.306 29.306 0 0 1 8.585 20.719z m78.135 104.634c0 15.416-12.494 27.916-27.915 27.916H393.45588c-15.416 0-27.91-12.494-27.91-27.91 0-15.41 12.495-27.909 27.91-27.909H831.53088c15.415 0 27.915 12.489 27.925 27.903z m25.113 99.073a29.313 29.313 0 0 1-8.58 20.725 29.287 29.287 0 0 1-20.721 8.586h-80.938c-16.189 0-29.307-13.123-29.307-29.306 0-16.185 13.117-29.308 29.307-29.308h80.938c7.77 0 15.223 3.088 20.721 8.58a29.328 29.328 0 0 1 8.58 20.723z m-161.85 0c0 16.192-19.491 29.311-43.589 29.311H118.90088c-24.055 0-43.558-13.106-43.558-29.311 0-16.186 19.502-29.303 43.558-29.303h560.229c24.098 0.001 43.589 13.118 43.589 29.303z m0 0"
            fill="#E3EDF1" p-id="1649"></path>
          <path
            d="M245.56088 562.214a30.712 30.712 0 0 1-8.994 21.719 30.661 30.661 0 0 1-21.714 8.988h-41.856c-16.955 0-30.697-13.74-30.697-30.697 0-16.951 13.742-30.691 30.697-30.691h41.856a30.695 30.695 0 0 1 30.708 30.681z m0 0"
            fill="#E3EDF1" p-id="1650"></path>
          <path
            d="M546.92488 622.212a33.522 33.522 0 0 1-9.805 23.689 33.495 33.495 0 0 1-23.685 9.811H33.48888A33.492 33.492 0 0 1 4.48988 638.97a33.46 33.46 0 0 1 0-33.488 33.483 33.483 0 0 1 28.999-16.748h479.946a33.482 33.482 0 0 1 23.679 9.805 33.457 33.457 0 0 1 9.811 23.673z m429.73 118.303c-0.006 18.326-14.857 33.18-33.184 33.186H543.83688c-17.993-0.469-32.329-15.191-32.329-33.186 0-17.996 14.336-32.715 32.329-33.186H943.46088c18.326 0.01 33.183 14.861 33.194 33.186z m0 0"
            fill="#E3EDF1" p-id="1651"></path>
          <path
            d="M641.80188 797.718a24.01 24.01 0 0 1-24.028 24.015H584.88088c-13.263 0-24.018-10.748-24.018-24.016 0-13.264 10.755-24.018 24.018-24.018h32.893c13.262 0.005 24.017 10.755 24.028 24.019z m0 0"
            fill="#E3EDF1" p-id="1652"></path>
          <path
            d="M909.70288 845.665a23.93 23.93 0 0 1-7.018 16.932 23.967 23.967 0 0 1-16.935 6.996H439.68688c-13.214 0-23.926-10.713-23.926-23.928s10.712-23.932 23.926-23.932H885.75088c13.229 0 23.952 10.711 23.952 23.932z m92.054 0c0 13.209-10.707 23.922-23.921 23.928H958.73088c-13.22 0-23.932-10.713-23.932-23.928s10.712-23.932 23.932-23.932h19.104c13.199 0 23.922 10.711 23.922 23.932z m0 0"
            fill="#E3EDF1" p-id="1653"></path>
          <path
            d="M708.23688 210.098H289.12288s-32.227-4.026-34.262 38.291c-2.02 42.305 0 486.035 0 543.744-0.677 47.117 57.732 57.383 78.587 30.553 28.216-34.246 10.078-74.561 4.043-76.584-6.062-2.031 392.934 0 392.934 0V264.5c-0.001 0 5.562-54.515-22.188-54.402z m0 0"
            fill="#FFFFFF" p-id="1654"></path>
          <path
            d="M300.61188 842.454c-14.448 0-28.14-5.471-37.553-15.045-8.966-9.096-13.605-21.328-13.402-35.357 0-12.902-0.102-45.41-0.236-88.504-0.461-147.648-1.332-422.482 0.236-455.407 1.53-31.97 20.248-43.353 37.249-43.353 1.803 0 2.871 0.146 2.871 0.146l418.46-0.033c6.804 0 12.468 2.507 16.951 7.464 14.031 15.528 10.563 51.164 10.417 52.673l0.032 486.307-5.235-0.02c-0.011 0-177.319-0.902-293.733-0.902-52.776 0-77.653 0.193-89.111 0.396 2.002 4.119 3.275 8.275 3.667 9.66 3.12 10.898 8.017 39.084-13.756 65.514-8.097 10.426-21.565 16.461-36.857 16.461z m-13.706-627.255c-7.588 0-25.393 3.27-26.843 33.436-1.557 32.655-0.697 307.319-0.236 454.874 0.135 43.107 0.236 75.641 0.236 88.623-0.16 11.26 3.431 20.898 10.401 27.959 7.49 7.592 18.471 11.945 30.148 11.945 12.05 0 22.52-4.568 28.711-12.553 13.832-16.779 15.169-34.219 13.875-45.908-1.407-12.756-6.304-21.51-8.005-22.836-1.836-0.52-3.334-2.975-2.916-5.508 0.328-2.047 0.526-3.287 6.846-4.039v-0.016l0.021 0.016c9.853-1.176 34.525-1.176 97.503-1.176 104.612 0 258.397 0.725 288.541 0.871V264.5c0.945-9.535 1.316-35.131-7.748-45.167a11.582 11.582 0 0 0-9.144-4.032H289.12288c-0.73-0.043-1.316-0.102-2.217-0.102z m0 0"
            fill="#21a2db" p-id="1655"></path>
          <path
            d="M309.11288 301.808h368.68v101.289h-368.68V301.808z m0 136.023h348.963v21.826H309.11288v-21.826z m0 53.941h184.332v21.82H309.11288v-21.82z m0 63.01H612.50088v21.826H309.11288v-21.826z m0 62.645h223.292v21.822H309.11288v-21.822z m543.465 83.677c9.053 9.043 11.608 21.393 5.719 27.578-5.863 6.18-18.004 3.85-27.035-5.213l-86.877-86.922c-9.031-9.043-11.598-21.398-5.687-27.576 5.858-6.186 17.998-3.852 27.014 5.213l86.866 86.92z m0 0"
            fill="#D0EAF1" p-id="1656"></path>
          <path
            d="M849.45888 734.749c-6.658 0-14.154-3.523-20.044-9.434l-86.867-86.922c-10.201-10.201-12.709-23.918-5.729-31.217 6.642-7.021 20.988-4.58 30.739 5.184l86.856 86.918c10.201 10.182 12.747 23.895 5.761 31.201-2.641 2.793-6.346 4.27-10.716 4.27zM747.51488 608.122c-2.014 0-4.864 0.451-6.921 2.637-4.864 5.068-2.266 16.039 5.638 23.953l86.866 86.92c4.94 4.941 11.056 7.893 16.361 7.893 2.024 0 4.875-0.449 6.948-2.637 4.854-5.078 2.238-16.043-5.665-23.938l-86.861-86.93c-4.935-4.945-11.05-7.898-16.366-7.898z m0 0"
            fill="#21a2db" p-id="1657"></path>
          <path
            d="M736.97488 611.364c-6.652 1.988 2.48-3.869-0.811 4.291-1.203 7.02 1.67 12.877 6.975 18.258l82.49 83.922c8.495 8.674 25.473 17.467 29.64 12.254 0.43-0.553 0.913-1.037 1.326-1.568l-119.62-117.157z m0 0"
            fill="#21a2db" p-id="1658"></path>
          <path
            d="M751.42388 458.224c-47.632-47.643-125.172-47.643-172.836 0.023-47.691 47.641-47.702 125.219-0.032 172.883 47.675 47.633 125.226 47.633 172.868 0 47.642-47.664 47.642-125.264 0-172.906"
            fill="#FFFFFF" p-id="1659"></path>
          <path
            d="M664.99788 672.062a126.68 126.68 0 0 1-90.126-37.258 126.54 126.54 0 0 1-37.274-90.131c0-34.086 13.257-66.098 37.296-90.117a126.572 126.572 0 0 1 90.12-37.274 126.6 126.6 0 0 1 90.083 37.249c49.688 49.693 49.688 130.568 0 180.273a126.577 126.577 0 0 1-90.099 37.258z m0.026-244.363c-31.293 0-60.685 12.164-82.753 34.23a116.226 116.226 0 0 0-34.257 82.754c0 31.305 12.15 60.697 34.219 82.764 22.074 22.063 51.461 34.197 82.765 34.197s60.685-12.135 82.742-34.197c45.641-45.65 45.641-119.898 0-165.527a116.105 116.105 0 0 0-82.716-34.221z m0 0"
            fill="#21a2db" p-id="1660"></path>
          <path
            d="M732.10988 516.892h-14.965v-5.214h14.965v5.214z m-30.594 0H685.89088v-5.214h15.625v5.214z m-31.245 0h-15.63v-5.214h15.63v5.214z m-31.261 0H623.39088v-5.214h15.619v5.214z m-31.234 0h-15.631v-5.214h15.631v5.214z m85.734-42.629h-15.625v-5.215h15.625v5.215z m-31.245 0h-15.619v-5.215h15.619v5.215z m-31.25 0h-15.63v-5.215h15.63v5.215z m115.545 98.347h-14.605v-5.215h14.605v5.215z m-30.225 0H700.72088v-5.215h15.614v5.215z m-31.245 0h-15.63v-5.215h15.63v5.215z m-31.25 0h-15.63v-5.215h15.63v5.215z m-31.261 0h-15.614v-5.215h15.614v5.215z m-31.233 0h-15.631v-5.215h15.631v5.215z m108.505 52.28h-15.63v-5.213h15.63v5.213z m-31.261 0h-15.614v-5.213h15.614v5.213z m-31.234 0h-15.631v-5.213h15.631v5.213z m0 0M331.66988 742.519s38.337 72.16-33.065 94.742c0 0-3.828-0.412 0 0 79.994-0.717 460.272 1.988 460.272 1.988s30.224-18.832 38.547-39.303c8.285-20.447-6.046-49.33-18.144-57.732-26.417-2.578-447.61 0.305-447.61 0.305z m0 0"
            fill="#CEE7EE" p-id="1661"></path>
          <path
            d="M759.61188 841.849h-0.757c-2.959-0.023-297.074-2.105-420.388-2.105-16.484 0-30.01 0.031-39.443 0.113l-0.145 0.053-4.236-0.461-0.328-2.518 0.134-2.471h2.47l0.279 0.037v-0.016l1.16 0.127c18.916-6.092 31.438-16.365 37.236-30.52 11.104-27.113-6.046-60.029-6.212-60.357l-2.019-3.791 4.291-0.035c2.019-0.014 202.814-1.369 334.316-1.369 67.987 0 106.207 0.359 113.574 1.078l0.671 0.07 0.563 0.379c13.424 9.322 27.669 39.66 19.067 60.854-8.549 21.012-38.312 39.74-39.584 40.539l-0.649 0.393z m-421.145-7.309c120.216 0 402.722 1.982 419.658 2.105 4.312-2.803 29.623-19.818 36.888-37.678 7.78-19.232-5.955-46.205-16.667-54.221-8.692-0.666-46.482-0.986-112.376-0.986-121.043 0-300.816 1.158-330.171 1.334 4.403 9.854 14.449 36.916 4.628 60.955-4.999 12.242-14.401 21.799-28.039 28.533 7.421-0.032 16.216-0.042 26.079-0.042z m0 0"
            fill="#21a2db" p-id="1662"></path>
          <path
            d="M1021.33888 359.582c0 20.925-17.252 37.894-38.477 37.894H814.41788c-21.241 0-38.478-16.969-38.478-37.894v-12.837c0-20.919 17.236-37.903 38.478-37.903h168.444c21.225 0 38.477 16.973 38.477 37.903v12.837z m0 0"
            fill="#FFFFFF" p-id="1663"></path>
          <path
            d="M982.86188 399.435H814.41788c-22.288 0-40.438-17.869-40.438-39.853v-12.837c0-21.978 18.139-39.847 40.438-39.847h168.444c22.282 0 40.437 17.87 40.437 39.847v12.837c-0.011 21.973-18.154 39.853-40.437 39.853z m-168.444-88.633c-20.136 0-36.522 16.125-36.522 35.943v12.837c0 19.819 16.387 35.944 36.522 35.944h168.444c20.135 0 36.517-16.125 36.517-35.944v-12.837c0-19.818-16.382-35.943-36.517-35.943H814.41788z m0 0"
            fill="#5BB6D2" p-id="1664"></path>
          <path
            d="M848.57788 437.154l14.739-41.628h54.456l-69.195 41.628z m17.499-37.719l-10.181 28.768 47.793-28.768h-37.612z m0 0"
            fill="#5BB6D2" p-id="1665"></path>
          <path
            d="M864.41188 407.284l5.687-16.699 15.706-3.232 15.979 3.491 5.316 2.667 3.624 0.415L883.06088 410.5l-18.649-3.216z m0 0"
            fill="#FFFFFF" p-id="1666"></path>
          <path
            d="M904.38788 340.441a11.74 11.74 0 1 0-5.986 21.848 11.745 11.745 0 0 0 17.719-10.465c-0.194-6.341-5.391-11.383-11.733-11.383zM833.59188 340.441c-6.347-0.005-11.544 5.031-11.742 11.372a11.735 11.735 0 0 0 5.756 10.476 11.739 11.739 0 0 0 11.952 0.005 11.736 11.736 0 0 0 5.767-10.47c-0.194-6.341-5.386-11.383-11.733-11.383zM975.18388 340.441c-6.347-0.005-11.55 5.031-11.748 11.372a11.747 11.747 0 1 0 23.481 0.011c-0.194-6.341-5.393-11.383-11.733-11.383z"
            fill="#21a2db" p-id="1667"></path>
        </svg>
        <p class="color-grey font-s-14">暂无数据</p>
      </div>
    </div>
    <!--    评论列表-->
    <el-drawer
      :destroy-on-close="true"
      size="45%"
      direction="rtl"
      :modal="false"
      style="padding: 20px"
      :with-header="false"
      :visible.sync="commentViewLoading">
      <div style="margin: 40px">
        <div class="text-right text-underline hover-cl font-s-13 color-grey-2 mb-20">
          <nuxt-link :to="`/dictum/dictum-details/`+$base64.encode(dictumInfo.id)" target="_blank">
            新标签页打开
          </nuxt-link>
        </div>
        <div style="background-color: #F8F8FA;border-radius: 4px;padding: 20px">
          <el-input type="textarea" autosize resize="none" :readonly="true" style="font-size: 16px"
                    v-model="dictumInfo.content"/>
        </div>
        <!--        评论-->
        <div style="margin-top: 40px">
          <div style="padding: 0px 6px 6px 6px;border: 1px solid #e2e2e5;border-radius: 4px;">
            <emoji-module :content.sync="dictumComment.content" :id="'dictum-comment'"></emoji-module>
            <textarea style="white-space:pre-line" id="dictum-comment" v-model="dictumComment.content"
                      placeholder="输入评论..."
                      rows="3" class="dictum-comment-cl">
            </textarea>
            <div class="overflow-hidden">
              <el-button plain class="fl-right" title="评论" size="small"
                         :disabled="dictumComment.content==null ||dictumComment.content==''"
                         :loading="buttonLoading" @click="addComment(dictumInfo.id,1,
                          dictumInfo.id,dictumInfo.uid,dictumComment.content,1)">评 论
              </el-button>
            </div>
          </div>
          <div class="mt-20 font-bold-s">热门评论</div>
          <!--          评论列表-->
          <div v-if="commentListLoading && commentList.length!=0" class="mt-20">
            <div v-for="(item,index) in commentList" :key="index" class="dictum-comment-item">
              <div class="padding-10">
                <div class="flex-left align-items-center">
                  <div>
                    <el-avatar :size="35" v-if="item.avatar" :src="item.avatar"></el-avatar>
                    <el-avatar :size="35" v-else src="/img/tx.jpg"></el-avatar>
                  </div>
                  <div class="ml-15" style="width: 100%">
                    <div>
                      <nuxt-link class="font-s-13 font-bold-s mr-10 hover-cl"
                                 :to="'/user_home/article?uuid='+$base64.encode(item.commentUid)" target="_blank">
                        {{ item.nickname }}
                      </nuxt-link>
                      <span class="font-s-13 line-height-24">{{ item.content }}</span>
                    </div>
                    <div class="font-s-12 flex-space-between mt-4">
                      <div class="color-grey-3"> {{ $utils.parseTime(item.createTime, '{y}-{m}-{d} {h}:{s}') }}</div>
                      <div class="flex-right align-items-center">
                        <el-popover
                          placement="bottom"
                          width="500"
                          trigger="click">
                          <div>
                            <div style="padding: 0px 6px 6px 6px;border: 1px solid #e2e2e5;border-radius: 4px;">
                              <emoji-module :content.sync="dictumComment2.content"
                                            :id="'dictum-comment-'+item.id"></emoji-module>
                              <textarea style="white-space:pre-line" :id="'dictum-comment-'+item.id"
                                        v-model="dictumComment2.content"
                                        placeholder="输入评论..."
                                        rows="3" class="dictum-comment-cl"></textarea>
                              <div class="overflow-hidden">
                                <el-button plain class="fl-right" title="评论" size="small"
                                           :disabled="dictumComment2.content==null ||dictumComment2.content==''"
                                           :loading="buttonLoading2" @click="addComment(item.id,2,
                         item.id,item.commentUid,dictumComment2.content,2)">回 复
                                </el-button>
                              </div>
                            </div>
                          </div>
                          <div slot="reference" class="cursor-pointer" title="回复" v-if="userInfo!=null">
                            <svg t="1734518848455" class="icon-theme-1 icon-hover icon-size-18"
                                 viewBox="0 0 1024 1024"
                                 version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="4500">
                              <path
                                d="M512.146827 268.510985c-250.902034 0-454.505322 157.57406-454.505322 359.095851 0 77.452531 32.639121 168.259723 83.298552 213.54786C166.24668 863.780505 88.131465 990.268512 109.075322 1018.193654c23.957624 31.943141 164.908706-79.128039 205.700895-61.760749C355.568406 973.800196 441.499439 987.04638 512.146827 987.04638c250.902034 0 447.742067-158.01764 454.089667-359.439545C972.069626 442.506103 768.001278 268.510985 512.146827 268.510985zM511.997535 950.528886C447.362645 950.528886 362.014817 933.770578 323.347087 920.455656c-38.351961-13.206444-179.982913 66.085924-179.982913 66.085924s52.530415-136.615167 29.151701-161.97227c-42.140114-45.708088-76.209862-124.513914-76.209862-195.375037 0-184.372531 186.277885-324.240977 415.827925-324.240977s415.35105 154.807323 415.447714 324.240977C927.690131 821.643613 741.54865 950.528886 511.997535 950.528886zM311.488568 622.945485m-64.394304 0a59.955 59.955 0 1 0 128.788609 0 59.955 59.955 0 1 0-128.788609 0ZM504.000204 622.945485m-64.394304 0a59.955 59.955 0 1 0 128.788609 0 59.955 59.955 0 1 0-128.788609 0ZM696.511839 622.945485m-64.394304 0a59.955 59.955 0 1 0 128.788609 0 59.955 59.955 0 1 0-128.788609 0Z"
                                p-id="4501"></path>
                            </svg>
                          </div>
                        </el-popover>
                        <svg t="1734519579902" class="icon-theme-1 icon-hover ml-4 cursor-pointer"
                             viewBox="0 0 1024 1024"
                             version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="5536" width="18" height="18"
                             v-if="userInfo!=null && userInfo.uuid==item.commentUid" @click="deleteComment(item.id)">
                          <path
                            d="M512 146.286a365.714 365.714 0 1 1 0 731.428 365.714 365.714 0 0 1 0-731.428z m0 62.025a303.69 303.69 0 1 0 0.073 607.451A303.69 303.69 0 0 0 512 208.311zM647.022 376.32a6.555 6.555 0 0 1 6.583 6.583 6.583 6.583 0 0 1-1.463 4.169L545.865 513.609l106.057 126.537a6.802 6.802 0 0 1 1.536 4.17 6.555 6.555 0 0 1-6.583 6.582l-53.833-0.292L512 553.984l-81.042 96.695-53.98 0.292a6.583 6.583 0 0 1-4.973-10.825l106.203-126.464-106.203-126.537a6.802 6.802 0 0 1-1.536-4.242 6.477 6.477 0 0 1 6.51-6.51l53.979 0.293L512 473.234l81.189-96.768z"
                            p-id="5537"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <!--                二级评论列表-->
                <div v-if="item.dictumCommentVoList!=null && item.dictumCommentVoList.length!=0"
                     class="level-comment">
                  <div v-for="(item2,index2) in item.dictumCommentVoList" :key="index2" class="mb-15">
                    <div class="align-items-center">
                      <div v-if="item2.commentGrade!=3">
                        <nuxt-link class="font-s-13 font-bold-s mr-10 hover-cl"
                                   :to="'/user_home/article?uuid='+$base64.encode(item2.commentUid)" target="_blank">
                          {{ item2.nickname }}
                        </nuxt-link>
                        <span class="font-s-13 line-height-24">{{ item2.content }}</span>
                      </div>
                      <div v-else>
                        <nuxt-link class="font-s-13 font-bold-s mr-10 hover-cl"
                                   :to="'/user_home/article?uuid='+$base64.encode(item2.commentUid)" target="_blank">
                          {{ item2.nickname }}
                        </nuxt-link>
                        <span class="font-s-13">
                          <span class="mr-4 font-s-12 color-grey-2">回复</span>
                           <nuxt-link class="font-s-13 font-bold-s mr-10 hover-cl"
                                      :to="'/user_home/article?uuid='+$base64.encode(item2.targetUid)" target="_blank">
                             {{ item2.targetNickname }}
                           </nuxt-link>
                        </span>
                        <span class="font-s-13 line-height-24">{{ item2.content }}</span>
                      </div>
                      <div class="font-s-12 flex-space-between mt-4">
                        <div class="color-grey-3"> {{ $utils.parseTime(item2.createTime, '{y}-{m}-{d} {h}:{s}') }}
                        </div>
                        <div class="flex-right align-items-center">
                          <el-popover
                            placement="bottom"
                            width="500"
                            trigger="click">
                            <div>
                              <div style="padding: 0px 6px 6px 6px;border: 1px solid #e2e2e5;border-radius: 4px;">
                                <emoji-module :content.sync="dictumComment3.content"
                                              :id="'dictum-comment-'+item2.id"></emoji-module>
                                <textarea style="white-space:pre-line" :id="'dictum-comment-'+item2.id"
                                          v-model="dictumComment3.content"
                                          placeholder="输入评论..."
                                          rows="3" class="dictum-comment-cl"></textarea>
                                <div class="overflow-hidden">
                                  <el-button plain class="fl-right" title="评论" size="small"
                                             :disabled="dictumComment3.content==null ||dictumComment3.content==''"
                                             :loading="buttonLoading3" @click="addComment(item.id,3,
                         item2.id,item2.commentUid,dictumComment3.content,2)">回 复
                                  </el-button>
                                </div>
                              </div>
                            </div>
                            <div slot="reference" class="cursor-pointer" title="回复" v-if="userInfo!=null">
                              <svg t="1734518848455" class="icon-theme-1 icon-hover icon-size-18"
                                   viewBox="0 0 1024 1024" version="1.1"
                                   xmlns="http://www.w3.org/2000/svg" p-id="4500">
                                <path
                                  d="M512.146827 268.510985c-250.902034 0-454.505322 157.57406-454.505322 359.095851 0 77.452531 32.639121 168.259723 83.298552 213.54786C166.24668 863.780505 88.131465 990.268512 109.075322 1018.193654c23.957624 31.943141 164.908706-79.128039 205.700895-61.760749C355.568406 973.800196 441.499439 987.04638 512.146827 987.04638c250.902034 0 447.742067-158.01764 454.089667-359.439545C972.069626 442.506103 768.001278 268.510985 512.146827 268.510985zM511.997535 950.528886C447.362645 950.528886 362.014817 933.770578 323.347087 920.455656c-38.351961-13.206444-179.982913 66.085924-179.982913 66.085924s52.530415-136.615167 29.151701-161.97227c-42.140114-45.708088-76.209862-124.513914-76.209862-195.375037 0-184.372531 186.277885-324.240977 415.827925-324.240977s415.35105 154.807323 415.447714 324.240977C927.690131 821.643613 741.54865 950.528886 511.997535 950.528886zM311.488568 622.945485m-64.394304 0a59.955 59.955 0 1 0 128.788609 0 59.955 59.955 0 1 0-128.788609 0ZM504.000204 622.945485m-64.394304 0a59.955 59.955 0 1 0 128.788609 0 59.955 59.955 0 1 0-128.788609 0ZM696.511839 622.945485m-64.394304 0a59.955 59.955 0 1 0 128.788609 0 59.955 59.955 0 1 0-128.788609 0Z"
                                  p-id="4501"></path>
                              </svg>
                            </div>
                          </el-popover>
                          <svg t="1734519579902" class="icon-theme-1 icon-hover ml-4 cursor-pointer"
                               viewBox="0 0 1024 1024"
                               version="1.1"
                               xmlns="http://www.w3.org/2000/svg" p-id="5536" width="18" height="18"
                               v-if="userInfo!=null && userInfo.uuid==item2.commentUid"
                               @click="deleteComment(item2.id)">
                            <path
                              d="M512 146.286a365.714 365.714 0 1 1 0 731.428 365.714 365.714 0 0 1 0-731.428z m0 62.025a303.69 303.69 0 1 0 0.073 607.451A303.69 303.69 0 0 0 512 208.311zM647.022 376.32a6.555 6.555 0 0 1 6.583 6.583 6.583 6.583 0 0 1-1.463 4.169L545.865 513.609l106.057 126.537a6.802 6.802 0 0 1 1.536 4.17 6.555 6.555 0 0 1-6.583 6.582l-53.833-0.292L512 553.984l-81.042 96.695-53.98 0.292a6.583 6.583 0 0 1-4.973-10.825l106.203-126.464-106.203-126.537a6.802 6.802 0 0 1-1.536-4.242 6.477 6.477 0 0 1 6.51-6.51l53.979 0.293L512 473.234l81.189-96.768z"
                              p-id="5537"></path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="text-center mt-20 font-s-14 color-grey-3">
            快来抢占沙发~
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import WaterfallLayout from '~/components/waterfall-layout.vue'
import {createAnimator} from '~/plugins/animationUtils'

export default {
  name: "dictumList",
  components: {
    WaterfallLayout
  },
  props: {
    // 内容
    content: String,
    //专辑id
    albumId: Number,
    //分类id
    groupId: Number,
    //分类名称
    groupName: String,
    //标签名称
    label: String,
    //作者名称
    author: String,
    //用户id
    uid: String,
    //搜索类型
    type: Number,

    typography: {//排版，1-瀑布流，2-列表
      type: Number,
      default: 1,
    },
    //是否为当前作者（用于判断是否显示编辑功能）
    isSelf: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 18,
      },
      total: 0,
      loading: true,
      scrollLoading: true,
      commentViewLoading: false,
      moreLoading: true,
      dictumInfoListArr: [],
      //评论相关
      dictumComment: {
        dictumId: null,
        uid: null,
        parentId: null,
        commentGrade: null,
        targetId: null,
        targetUid: null,
        content: '',
        type: null,
      },
      dictumComment2: {
        content: '',
      },
      dictumComment3: {
        content: '',
      },
      buttonLoading: false,
      buttonLoading2: false,
      buttonLoading3: false,
      commentList: [],
      commentListLoading: false,
      userInfo: {},
      dictumInfo: {},
      animator: null, // 动画器实例
    }
  },
  watch: {
    albumId() {
      this.dictumInfoLists();
    },
    groupId() {
      this.dictumInfoLists();
    },
    content() {
      this.dictumInfoLists();
    },
    author() {
      this.dictumInfoLists();
    },
    label() {
      this.dictumInfoLists();
    }
  },
  methods: {
    deleteComment(id) {
      if (this.userInfo == null) {
        this.loginDialog = true;
        return;
      }
      this.$confirm('确定要删除该评论吗!', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning'
      }).then(() => {
        this.$API(`/frontDesk/dictum/comment/delete/${id}`, "delete").then(res => {
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getCommentList();
          }
        })
      });
    },
    /**
     *
     * @param parentId 父级评论id
     * @param commentGrade 评论等级（1：一级，2：二级，3：三级及以下）
     * @param targetId 目标id
     * @param targetUid 目标用户id
     * @param content 评论内容
     * @param type 评论类型（1：名言，2：评论）
     */
    addComment(parentId, commentGrade, targetId, targetUid, content, type) {
      if (this.userInfo == null) {
        this.loginDialog = true;
        return;
      }
      let dictumComment = {};
      dictumComment.dictumId = this.dictumInfo.id;
      dictumComment.uid = this.dictumInfo.uid;
      dictumComment.parentId = parentId;
      dictumComment.commentGrade = commentGrade;
      dictumComment.targetId = targetId;
      dictumComment.targetUid = targetUid;
      dictumComment.content = content;
      dictumComment.type = type;
      this.buttonLoading = true;
      this.buttonLoading2 = true;
      this.buttonLoading3 = true;
      this.$API("/frontDesk/dictum/comment/add", "post", null, dictumComment).then(res => {
        if (res.code == 200) {
          this.$modal.msgSuccess("评论成功");
          this.getCommentList();
          this.dictumComment = {};
          this.dictumComment2 = {};
          this.dictumComment3 = {};
        }
      }).finally(() => {
        this.buttonLoading = false;
        this.buttonLoading2 = false;
        this.buttonLoading3 = false;
      })
    },
    viewCommentList(item) {
      this.commentViewLoading = true;
      this.dictumInfo = item;
      this.commentListLoading = false;
      this.getCommentList();
    },
    getCommentList() {
      this.$API(`/white/dictum/comment/list/${this.dictumInfo.id}`, "get").then(res => {
        this.commentList = [];
        if (res.code == 200) {
          this.commentList = res.rows;
        }
        this.commentListLoading = true;
      })
    },
    updateInfo(item) {
      this.$router.push({
        path: '/dictum/release-dictum',
        query: {code: this.$base64.encode(item.id), type: 1}
      })
    },
    copyInfo(item) {
      this.$router.push({
        path: '/dictum/release-dictum',
        query: {code: this.$base64.encode(item.id), type: 2}
      })
    },
    deleteInfo(item) {
      this.$modal.confirm('确认要删除该名言吗？').then(() => {
        this.loading = true;
        return this.$API(`/frontDesk/dictum/info/${item.id}/${item.groupId}`, "delete");
      }).then(res => {
        this.dictumInfoLists();
        this.$modal.msgSuccess("删除成功!");
      }).finally(() => this.loading = false)
    },
    jumpUrlBaidu(url, keywords) {
      let path = window.location.protocol + '//' + url + '/s?wd=' + keywords
      window.open(path, '_blank');
    },
    dictumInfoLists() {
      this.loading = true;
      this.queryParams.pageNum = 1;
      this.queryParams.content = this.content;
      this.queryParams.albumId = this.albumId;
      this.queryParams.groupId = this.groupId;
      this.queryParams.author = this.author;
      this.queryParams.label = this.label;
      this.queryParams.uid = this.uid;
      this.queryParams.type = this.type;
      this.dictumInfoListArr = [];
      this.$API("/white/dictum/info/list", "get", this.queryParams).then(res => {
        this.dictumInfoListArr = res.rows;
        this.total = res.total;
      }).finally(() => {
        this.loading = false;
        this.animator.triggerAllItemsAnimation(this.dictumInfoListArr, 'dictumListItem');
      })
      this.getBasicsUsers();
    },
    getBasicsUsers() {
      this.$API('/front-desk/user/basics', this.$get()).then(res => {
        if (res != null) {
          this.userInfo = res.data;
        }
      });
    },
    getData() {
      let scrollTop = document.documentElement.scrollTop
      let clientHeight = document.documentElement.clientHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollHeight - (scrollTop + clientHeight) <= 1) {
        if (!this.scrollLoading) return;
        this.load()
      }
    },
    load() {
      if (this.total > (this.queryParams.pageNum) * this.queryParams.pageSize) {
        this.scrollLoading = false;
        this.queryParams.pageNum = this.queryParams.pageNum + 1;
        this.moreLoading = true;
        const startIndex = this.dictumInfoListArr.length; // 记录新增前的索引
        this.$API("/white/dictum/info/list", "get", this.queryParams).then(res => {
          if (this.typography === 1 && this.$refs.waterfallLayout) {
            this.$refs.waterfallLayout.addItems(res.rows);
          } else {
            // 列表模式：直接添加到数组
            res.rows.forEach(item => {
              this.dictumInfoListArr.push(item)
            })
            this.animator.triggerNewItemsAnimation(startIndex, res.rows.length, 'dictumListItem');
          }
          this.total = res.total;
        }).finally(() => this.scrollLoading = true)
      } else {
        this.moreLoading = false;
      }
    },
  },
  destroyed() {
    //离开页面时删除该监听
    window.removeEventListener('scroll', this.getData, true)
  },
  mounted() {
    this.animator = createAnimator(this, 'commonList')
    //添加滚动监听事件
    window.addEventListener('scroll', this.getData, true);
    this.dictumInfoLists();
  },
}
</script>

<style>
@import url("components/css/pc/dictum-comment.css");

.dictum-info-cl {
  background-color: #FFFFFF;
  padding: 15px 20px;
  margin: 0 0 30px 0;
  border-radius: 15px;
  border: 1px solid #FFFFFF;
  box-shadow: 0 4px 8px 0 #ecf0f1;
}

.dictum-info-cl:hover {
  border: 1px solid #e2e2e5;
}

.user-info {
  padding-bottom: 10px;
  border-bottom: 1px dotted #ced6e0;
  margin-bottom: 10px;
}

.dictum-content {
  display: flex;
  padding: 5px 0 10px 0;
  flex-wrap: wrap;
  flex-direction: column;
}

/* 自定义文本显示样式 - 替代textarea */
.dictum-text-content {
  width: 100%;
  font-size: 16px;
  line-height: 36px;
  color: var(--default-color);
  word-wrap: break-word;
  white-space: pre-wrap; /* 保持换行和空格 */
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}


.el-button--small {
  padding: 9px 15px;
}

.el-drawer {
  border-radius: 20px;
}

.dictum-info-ul li {
  list-style: none;
}

/* 重置瀑布流中的 box-item 样式 */
.waterfall-item .box-item {
  width: 100% !important; /* 使用瀑布流组件设置的宽度 */
  margin-bottom: 0 !important; /* 间距由瀑布流组件控制 */
}
</style>
